<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" width="device-width" initial-scale="1.0">
  <title>模拟爱奇艺主界面</title>
  
  <style>
    /* 全局样式重置 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
    }

    /* 头部导航栏样式 */
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
      background-color: #000000;
      color: white;
    }

.highlight {
      background-color: aquamarine;
      padding: 5px 10px;
      border-radius: 5px;
    }

.highlight a {
      color: white;
    }

   .logo img {
      vertical-align: middle;
    }

    nav ul {
      list-style: none;
      display: flex;
    }

    nav ul li {
      margin-right: 20px;
    }

    nav ul li a {
      color: white;
      text-decoration: none;
    }

    /* 影片分类筛选按钮样式 */
.video-filter-buttons {
      display: flex;
      justify-content: space-around;
      align-items: center;
      background-color: #222;
      padding: 10px;
      margin-bottom: 0px;
    }

.video-filter-buttons button {
      background-color: #555;
      color: white;
      border: none;
      padding: 8px 15px;
      border-radius: 5px;
      cursor: pointer;
    }

   .search-bar {
      display: flex;
    }

   .search-bar input {
      padding: 5px 10px;
      border: none;
      border-radius: 5px 0 0 5px;
    }

   .search-bar button {
      padding: 5px 15px;
      border: none;
      border-radius: 0 5px 5px 0;
      background-color: hotpink;
      color: white;
      cursor: pointer;
    }

  /* 导航栏样式 */
  nav {
      background-color: #000000;
      padding: 10px;
  }
  
  /* 头像图片样式 */
  #avatar-img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      cursor: pointer; /* 鼠标指针变为手型，提示可点击 */
  }
  
  /* 模态框（子页面容器）的样式 */
  .modal {
      display: none; /* 初始隐藏模态框 */
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.4); /* 半透明背景 */
	  
  }
  
  /* 模态框内容区域的样式 */
  .modal-content {
      background-color:white;
      margin: 15% auto;
      padding: 10px;
      border: 1px solid #888;
      width: 20%;
	  height:350px;
	   margin-right: 20px;
	    margin-top: 80px;
  }
  
  /* 关闭按钮的样式 */
  .close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
  }
  
  //退出登录
 #logout-btn {
     padding: 20px 20px;
     background-color: #ffffff;
     color: white;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     display: block; /* 确保按钮是块级元素 */
 }
  
  #logout-btn:hover {
      background-color: #d32f2f; /* 按钮悬停时颜色变化 */
  }
  
    /* 轮播图区域样式 */
.carousel {
      position: relative;
      width: 100%;
      margin-bottom: 0;
      background-color: #222;
    }

.carousel img {
      width: 100%;
      display: none;
    }

   .carousel img.active {
      display: block;
    }

   .carousel button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      border: none;
      padding: 10px 15px;
      cursor: pointer;
    }

   .carousel button.prev {
      left: 10px;
    }

   .carousel button.next {
      right: 10px;
    }

    /* 轮播图指示小圆点样式 */
.carousel-dots {
      position: absolute;
      bottom: 15px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      justify-content: center;
      align-items: center;
    }

   .carousel-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.7);
      margin: 0 5px;
      cursor: pointer;
    }

   .carousel-dot.active {
      background-color: white;
    }

    /* 影片分类展示区域样式 */
.category {
      padding: 20px;
    }

   .category h2 {
      margin-bottom: 10px;
      color: white;
    }

   .category h4 {
      margin: 0;
      color: white;
      text-align: center;
    }

    /* 影片展示区域整体样式 */
.movie-showcase {
      padding: 20px;
      background-color: #333;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 20px;
    }

    /* 影片展示模块通用样式 */
.movie-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #444;
      border-radius: 5px;
      padding: 10px;
    }

   .movie-item img {
      width: 180px;
      height: 270px;
      border-radius: 5px;
      margin-bottom: 10px;
    }

   .movie-item h3 {
      color: white;
      margin: 0;
      font-size: 16px;
    }

   .movie-item p {
      color: #ccc;
      margin: 0;
      font-size: 12px;
      text-align: center;
    }

 
  /* 下载客户端弹出层样式 */
  .download-popup {
    display: none;
    position: absolute;
    top: 70px;
    right: 570px;
	
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    padding: 10px;
    text-align: center;
    z-index: 1;
    width: 300px;
  }
  
  .download-popup h3 {
    color: #333;
    margin-bottom: 5px;
    font-size: 18px;
  }
  
  body header.download-popup {
    display: none;
    /* 其他样式保持不变 */

	
  }
  
  .download-popup button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
	
  }
  
  .download-popup img {
    width: 100px;
    height: 100px;
    margin-bottom: 5px;
  }
  
  .download-popup hr {
    border: none;
    border-top: 1px dashed #ccc;
    margin: 10px 0;
  }
  
  .download-popup-left {
    float: left;
    width: 50%;
  }
  
  .download-popup-right {
    float: right;
    width: 50%;
  }
	
	
	 .zoomable-img {
	   width: 200px;
	   height: auto;
	   transition: transform 0.3s ease; /* 添加过渡效果，让缩放变化更平滑 */
	 }
	 
	 .zoomable-img:hover {
	   transform: scale(1.2); /* 鼠标悬停时放大到原始大小的1.2倍 */
	 }
	
	/* 新增的消息、动态、收藏样式 */
	.user-extra {
	  display: flex;
	  margin-right: 10px;
	}
	
	.user-extra span {
	  margin-right: 30px;
	  cursor: pointer;
	}
	
	
		  /* 消息子页面弹出层样式 */
	.message-popup {
	  position: absolute;
	  top: 70px; /* 可根据实际调整弹出位置的垂直距离 */
	  left: 850px;
	  background-color: #fff;
	  border-radius: 5px;
	  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
	  padding: 10px;
	  z-index: 1;
	   display: none; /* 确认有这一行来初始隐藏弹出层 */
	    width: 400px; /* 示例宽度，可按需修改 */
	       height: 300px; /* 示例高度，可按需修改 */
	   transform: translate (-50%, -50%);
	}
	
	.message-item {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  margin-bottom: 10px;
	}
	
	.message-item img {
	  width: 100px;
	  height: 100px;
	  margin-bottom: 5px;
	}
	
	.message-item span {
	  color: #333;
	}
	
	.message-item a {
	  text-decoration: none;
	}
		}
		
		.message-item {
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  margin-bottom: 10px;
		}
		
		.message-item img {
		  width: 100px;
		  height: 100px;
		  margin-bottom: 5px;
		}
		
		.message-item span {
		  color: #333;
		}
		
		.message-item a {
		  text-decoration: none;
		}
	
	
	
	
	/* 视频播放区域样式 */
	.video-play-area {
	  padding: 20px;
	  background-color: #333;
	  border-radius: 5px;
	  display: flex;
	  justify-content: space-between;
	  align-items: flex-start;
	  width: 100%;
	   margin-bottom: 0; /* 添加这一行，将底部外边距设置为0，去除与下一个区域默认的空隙 */
	}
	
	.video-play-area img {
	  width: 50%;
	  height: auto;
	  margin-right: 10px;
	   margin-left: 100px;
	  border-radius: 5px;
	  cursor: pointer;
	  transition: transform 0.3s ease;
	}
	
	.video-play-area.img-container {
	  display: flex;
	  flex-direction: row;
	  width: 40%;
	}
	
	.video-play-area video {
	  width: 95%;
	  height: auto;
	  max-width: 800px;
	   margin-top: 40px; /* 添加这一行，设置与顶部距离为10px */
	}
	
	/* 图片对应下方模块的样式 */
	.info-module {
	  width: 40%;
	  padding: 10px;
	  margin-top: 10px; /* 与图片拉开一点距离 */
	}
	
	.info-module h2 {
	  color: white;
	  font-size: 24px;
	  margin-bottom: 10px;
	}
	
	.rating {
	  color: gold;
	  margin-bottom: 10px;
	}
	
	.stars {
	  display: inline-block;
	}
	
	.stars span {
	  font-size: 20px;
	}
	
	.followers {
	  color: #ccc;
	  font-size: 14px;
	  margin-bottom: 10px;
	}
	
	.description {
	  color: #ccc;
	  font-size: 12px;
	}
	/* 热门小说改番剧榜区域样式 */
	.novel-to-anime-rank {
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  justify-content: space-between;
	  padding: 20px;
	  height: 400px;
	  background-color: antiquewhite;
	 
	  margin-top: 0; /* 添加这一行，将顶部外边距设置为0，去除与上一个区域的空隙 */
	}
	
	.rank-title {
	  color: white;
	  margin: 0;
	  flex: 1;
	  text-align: left;
	}
	
	.rank-images {
	  display: flex;
	  flex-wrap: nowrap;
	  gap: 10px;
	}
	
	.rank-images img {
	  width: 180px;
	  height: 240px;
	  border-radius: 5px;
	  cursor: pointer;
	  margin-right: 30px; 
	  margin-bottom: 20px; 
	}
	/* 图片下方文字样式 */
	.image-caption {
	  color: black;
	  text-align: center;
	   margin-top: 5px;
	  font-size: 15px;
	}
		
	
	.view-more-btn {
	  background-color: mediumorchid;
	  
	  color: white;
	  border: none;
	  padding: 8px 15px;
	  border-radius: 5px;
	  cursor: pointer;
	}
	

.novel-to-anime-rank.rank-images img {
    width: 180px;
    height: 240px;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 30px; 
    margin-bottom: 20px; 
    transition: transform 0.3s ease; /* 添加过渡效果，让缩放变化平滑，0.3s为过渡时间，ease是缓动函数 */
}
	

    /* 底部版权信息样式 */
    footer {
      text-align: center;
      padding: 10px;
      background-color: #222;
      color: white;
	  margin-top: 0; /* 去除底部版权信息与上面元素默认的间距 */
    }
	
	
	
	   
	         
  </style>
</head>

<body>
	
  <!-- 头部导航栏 -->
  <header>
    <div class="logo">
      <img src="6.png" alt="logo" width="120" height="60">
    </div>
   <nav>
     <ul>
       <li><a href="#">首页</a></li>
       <li><a href="#">电视剧</a></li>
       <li><a href="#">电影</a></li>
       <li><a href="#">综艺</a></li>
       <li class="highlight"><a href="#">动漫</a></li>
       <li id="download-link"><a href="#">下载客户端</a></li> <!-- 添加这一行 -->
     </ul>
   </nav>
   <!-- 弹出层结构 -->
   <div class="download-popup">
     <div class="download-popup-left">
       <h3>手机版</h3>
       <h4 style="color:black;">扫码即可下载手机APP</h4>
       <img src="ep.png" alt="二维码图片">
     </div>
     <hr>
     <div class="download-popup-right">
       <h3>Windows端</h3>
       <h4 style="color:black;">适合WIN系统设备</h4>
       <button>立即下载</button>
     </div>
   </div>
   
   
    <div class="search-bar">
      <input type="text" placeholder="搜索影片">
      <button>搜索</button>
    </div>
	<div class="user-extra">
	  <span id="message-btn">消息</span> <!-- 为消息字样添加 id，方便 JavaScript 操作 -->
	  <span>动态</span>
	  <span>收藏</span>
	</div>
	<!-- 消息子页面弹出层 -->
	<div class="message-popup" style="display: none;">
	  <!-- 这里先不放入东西，后续可根据需求添加 -->
	  <a href="11.html">五环</a><br>
	  <a href="12.html">跳动的爱心</a><br>
	  <a href="13.html">正方体</a><br>
	  <a href="14.html">五星红旗</a><br>
	  <a href="111唐婧妍.html">账户登录</a><br>
	  <a href="长图.html">小女孩</a><br>
	</div>
	
    <nav>
      <img src="5.png" alt="用户头像" width="40" height="40" id="avatar-img"/>
    <nav>
		 <!-- 模态框（子页面的容器），初始是隐藏的 -->
		    <div id="myModal" class="modal">
		        <div class="modal-content">
		            <span class="close">&times;</span>
		             <img src="zhu.png" width:%100  height="300"  >
					  <button id="logout-btn">退出登录</button> <!-- 添加退出登录按钮 -->
		        </div>
		    </div>
  </header>

  <!-- 轮播图区域（实现切换和自动播放功能） -->
  <section class="carousel">
    <button class="prev">&lt;</button>
    <button class="next">&gt;</button>
    <img src="1.png" alt="轮播图1" class="active">
    <img src="2.png" alt="轮播图2" >
    <img src="3.png" alt="轮播图3">
    <img src="4.png" alt="轮播图4">
    <!-- 轮播图指示小圆点容器 -->
    <div class="carousel-dots">
      <span class="carousel-dot active"></span>
      <span class="carousel-dot"></span>
      <span class="carousel-dot"></span>
      <span class="carousel-dot"></span>
    </div>
  </section>

  <!-- 影片分类筛选按钮 -->
  <section class="video-filter-buttons">
    <button>全部动漫</button>
    <button>免费</button>
    <button>日本</button>
    <button>奇幻</button>
    <button>热血</button>
    <button>搞笑</button>
    <button>冒险</button>
    <button>竞技</button>
    <button>科幻</button>
    <button>校园</button>
    <button>内地</button>
	
  </section>

  <!-- 影片展示区域 -->
  <h1 style="color:white;background-color: black;">猜你喜欢❤</h1>
  <section class="movie-showcase">
	   
    <div class="movie-item">
      <img src="10.png" alt="动漫影片1">
      <h3>火影忍者</h3>
      <p>热血忍者的全新冒险</p>
    </div>
    <div class="movie-item">
      <img src="13.png" alt="动漫影片2">
      <h3>间谍过家家</h3>
      <p>非凡一家绝密生活</p>
    </div>
    <div class="movie-item">
      <img src="007.png" alt="动漫影片3">
      <h3>鹿乃子乃子乃子虎视眈眈</h3>
      <p>申金，害我笑了一下</p>
    </div>
    <div class="movie-item">
      <img src="14.png" alt="动漫影片4">
      <h3>刺客伍六七</h3>
      <p>伍六七身世之谜解开</p>
    </div>
    <div class="movie-item">
      <img src="003.png" alt="动漫影片5">
      <h3>胆大党</h3>
      <p>超自然武装当哒当</p>
    </div>
    <div class="movie-item">
      <img src="006.png" alt="动漫影片6">
      <h3>四月是你的谎言</h3>
      <p>在这个季节以最寂寞的方式落幕</p>
    </div>
    <div class="movie-item">
      <img src="004.png" alt="动漫影片7">
      <h3>BANANA FISH</h3>
      <p>只手支配纽约的不良少年</p>
    </div>
    <div class="movie-item">
      <img src="008.png" alt="动漫影片8">
      <h3>妖精的尾巴</h3>
      <p>最强魔道公会再集结</p>
    </div>
    <div class="movie-item">
      <img src="009.png" alt="动漫影片9">
      <h3>灌篮高手</h3>
      <p>教练我想打篮球</p>
    </div>
    <div class="movie-item">
      <img src="16.png" alt="动漫影片10">
      <h3>名侦探柯南</h3>
      <p>真相只有一个</p>
    </div>
    <div class="movie-item">
      <img src="11.png" alt="动漫影片11">
      <h3>海绵宝宝</h3>
      <p>天真乐观可爱海绵</p>
    </div>
    <div class="movie-item">
      <img src="18.png" alt="动漫影片12">
      <h3>未闻花名</h3>
      <p>我们仍未知道那天所见的花的名字</p>
    </div>
   
  </section>

 <!-- 视频播放区域 -->
<!-- 视频播放区域 -->
  <section class="video-play-area">
    <div class="img-container">
		<h1 style="color:white;">热番推荐👍</h1>
      <img src="666.png" alt="相关图片1" data-video-src="666.mp4" data-title="精彩动漫1" data-rating="4.5" data-followers="2923" data-description="富㭴勇太于初中毕业的时候，决定同时为自己举办中二病毕业的仪式。打算顺利度过高中生活的他，在开学日以最后的中二语录完全封锁这段黑历史。可惜天意弄人，勇太遇上了现任中二病患者暨同班同学小鸟游六花，更被对方看出中二病的残余症状。六花于是以此威逼勇太与她“立下契约”">
     
	 </div>
	 <h3 style="color:skyblue;background-color:darkgrey;">抢先试看</h3>
    <video controls class="main-video">
      <source src="666.mp4" type="video/mp4">

    </video>
		  
    <div class="info-module">
      <h2 class="title">中二病也要谈恋爱！</h2>
      <div class="rating">
        <span class="rating-number">4.5</span>
        <span class="stars">
          <span>★</span><span>★</span><span>★</span><span>★</span><span>☆</span>
        </span>
      </div>
      <div class="followers">正在追：2923</div>
      <div class="description">富㭴勇太于初中毕业的时候，决定同时为自己举办中二病毕业的仪式。打算顺利度过高中生活的他，在开学日以最后的中二语录完全封锁这段黑历史。可惜天意弄人，勇太遇上了现任中二病患者暨同班同学小鸟游六花，更被对方看出中二病的残余症状。六花于是以此威逼勇太与她“立下契约”</div>
    </div>
	
	
  </section>

	<!-- 热门小说改番剧榜区域 -->
	<section class="novel-to-anime-rank">
	  <h1  style="color:black">热门小说改番剧榜</h1>
	  <div class="rank-images">
	     <div class="image-item">
	         <img src="刀剑神域.png" alt="小说改番剧图片 1" class="zoomable-img">
	         <p class="image-caption">刀剑神域</p>
	       </div>
	       <div class="image-item">
	         <img src="精灵幻想记.png" alt="小说改番剧图片 2" class="zoomable-img">
	         <p class="image-caption">精灵幻想记</p>
	       </div>
	       <div class="image-item">
	         <img src="杖与剑的魔剑谭.png" alt="小说改番剧图片 3" class="zoomable-img">
	         <p class="image-caption">杖与剑的魔剑谭</p>
	       </div>
	       <div class="image-item">
	         <img src="依靠最弱辅助职能.png" alt="小说改番剧图片 4" class="zoomable-img">
	         <p class="image-caption">依靠最弱辅助职能</p>
	       </div>
		</div>
	  <button class="view-more-btn" >查看更多</button>
	</section>
	

  <!-- 底部版权信息 -->
  <footer>
    <p>版权所有 &copy; 模拟爱奇艺 2024</p>
  </footer>

  <script>
 // 获取轮播图相关元素
const carousel = document.querySelector('.carousel');
const images = carousel.querySelectorAll('img');
const prevButton = carousel.querySelector('.prev');
const nextButton = carousel.querySelector('.next');
const dots = carousel.querySelectorAll('.carousel-dot');
let currentIndex = 0;

// 显示指定索引的图片
function showImage(index) {
    images.forEach((img, i) => {
        img.classList.remove('active');
        if (i === index) {
            img.classList.add('active');
        }
    });
    // 更新小圆点的选中状态
    dots.forEach((dot, i) => {
        dot.classList.remove('active');
        if (i === index) {
            dot.classList.add('active');
        }
    });
}

// 切换到下一张图片
function nextImage() {
    currentIndex++;
    if (currentIndex >= images.length) {
        currentIndex = 0;
    }
    showImage(currentIndex);
}

// 切换到上一张图片
function prevImage() {
    currentIndex--;
    if (currentIndex < 0) {
        currentIndex = images.length - 1;
    }
    showImage(currentIndex);
}

// 自动播放轮播图，每3秒切换一次
function autoPlay() {
    setInterval(nextImage, 3000);
}


// 给小圆点添加点击事件监听器，点击切换图片
dots.forEach((dot, index) => {
    dot.addEventListener('click', () => {
        currentIndex = index;
        showImage(currentIndex);
    });
});

// 给小圆点添加鼠标进入事件监听器，鼠标悬停切换图片
dots.forEach((dot, index) => {
    dot.addEventListener('mouseenter', () => {
        currentIndex = index;
        showImage(currentIndex);
    });
});
// 给上一张箭头按钮添加点击事件监听器，点击切换到上一张图片
prevButton.addEventListener('click', prevImage);

// 给下一张箭头按钮添加点击事件监听器，点击切换到下一张图片
nextButton.addEventListener('click', nextImage);
 // 启动轮播图自动播放功能
  autoPlay();

document.addEventListener('DOMContentLoaded', function () {
  // 获取下载客户端所在的li元素（扩大了可点击范围的目标元素）
  const downloadLinkLi = document.getElementById('download-link');
  const downloadPopup = document.querySelector('.download-popup');

  // 鼠标移入下载客户端所在li元素显示弹出层（之前是在a标签上，现在改到li上，范围变大了）
  downloadLinkLi.addEventListener('mouseover', (e) => {
    e.preventDefault(); // 阻止默认的链接跳转行为（虽然这里一般不会有跳转，但保持以防万一）
    downloadPopup.style.display = 'block';
  });

  // 鼠标移出下载客户端所在li元素隐藏弹出层
  downloadLinkLi.addEventListener('mouseout', () => {
    downloadPopup.style.display = 'none';
  });


// 获取消息字样元素和消息子页面弹出层元素
function getMessageElements() {
  return {
    messageBtn: document.getElementById('message-btn'), // 通过 id 获取消息按钮元素
    messagePopup: document.querySelector('.message-popup')
  };
}

// 显示消息弹出层的函数
function showMessagePopup() {
  const { messagePopup } = getMessageElements();
  messagePopup.style.display = 'block';
}

// 隐藏消息弹出层的函数
function hideMessagePopup() {
  const { messagePopup } = getMessageElements();
  messagePopup.style.display = 'none';
}

// 为消息子页面链接添加点击跳转功能的函数
function setupMessageLinkClick() {
  const { messagePopup } = getMessageElements();
  const messageLinks = messagePopup.querySelectorAll('a');
  messageLinks.forEach(link => {
    link.addEventListener('click', (e) => {
      e.preventDefault(); // 先阻止默认的链接跳转行为，以便进行一些可能的处理（如日志记录等）
      window.location.href = link.getAttribute('href');
    });
  });
}
// 初始化消息弹出层相关功能的主函数
function initMessagePopupFunctionality() {
  const { messageBtn, messagePopup } = getMessageElements();

  messageBtn.addEventListener('click', showMessagePopup);

  document.addEventListener('click', function (e) {
    const { messagePopup, messageBtn } = getMessageElements();
    if (!messagePopup.contains(e.target) && e.target!== messageBtn) {
      messagePopup.style.display = 'none';
    }
  });

  setupMessageLinkClick(); // 初始化消息子页面链接点击跳转功能


}

 // 初始化消息弹出层相关功能
  initMessagePopupFunctionality();
  
  
  
  // 获取头像图片元素、模态框元素、关闭按钮元素以及退出登录按钮元素
  const avatarImg = document.getElementById('avatar-img');
  const modal = document.getElementById('myModal');
  const closeBtn = document.getElementsByClassName('close')[0];
  const logoutBtn = document.getElementById('logout-btn');
  
  // 给头像图片添加点击事件监听器，点击时显示模态框
  avatarImg.addEventListener('click', function () {
      modal.style.display = "block";
  });
  
  // 给关闭按钮添加点击事件监听器，点击时隐藏模态框
  closeBtn.addEventListener('click', function () {
      modal.style.display = "none";
  });
  
  // 点击模态框外部区域也关闭模态框
  window.addEventListener('click', function (event) {
      if (event.target === modal) {
          modal.style.display = "none";
      }
  });
  
  // 给退出登录按钮添加点击事件监听器，点击时跳转到指定的html文件（这里是login.html）
  logoutBtn.addEventListener('click', function () {
      window.location.href = "login.html";
  });










  
});

 
	
  </script>
</body>

</html>